<template>
    <f7-page>
        <f7-navbar title="设置"></f7-navbar>
        <br　/>
		<f7-block style="border-radius:20px; background:#FAE7C6; border-style:groove;
			border-width:2px; height:170px;" 
			class="block block-strong inset">
			<img src='../../../assets/user.jpg' style="border-radius:100px; width:100px;"></img>
			<f7-row>
				<f7-col style="width:100px; text-align:center;"> 
					<f7-link style="color:#000000;">{{realname}}</f7-link>
				</f7-col >	 
				<f7-col style="position:absolute; top:0px; right:0px; width:50%; text-align:left;">
					<p style="color:#000000;">用户名：　
						<f7-link>{{username}}</f7-link>
	                </p>
	                <p style="color:#000000;">电话号码：
						<f7-link>
							<p v-if="phone == null">未设置</p>
							<p v-else>{{phone}}</p>
						</f7-link> 
					</p>         
	               	<p style="color:#000000">电子邮箱：
	                    <f7-link>
	                        <p v-if="email == null">未设置</p>
	                        <p v-else>{{email}}</p>
	                    </f7-link>
					</p>
				</f7-col>
			</f7-row>
		</f7-block>
		<f7-list inline-labels no-hairlines inset>
		    <f7-list-item link="/settings/resetPassword">修改密码</f7-list-item>
            <f7-list-item link="#" :no-chevron="true">
                <f7-list-item-cell>版本</f7-list-item-cell>
                <f7-list-item-cell style="text-align:right;">V2-1.0</f7-list-item-cell>
            </f7-list-item>
            <f7-list-button class="logoutButton" title="退出登录" color="blue" @click="logout"></f7-list-button>
		</f7-list>
    </f7-page>
</template>

<script>
import { getUser, setUser, clearUser } from '@/utils/auth';
import { getStore, setStore, clearStore } from '@/utils/storage';
import keys from '@/utils/rememberKeys';

export default {
    data: function() {
        return {
        	username : '',
        	realname: '',
            phone : '',
            email : ''
        }
    },
    methods: {
        logout: function() {
            var self = this;
        	let dialog = this.$f7.dialog.preloader('退出登录中...');
        	setTimeout(() => {
                clearUser();
                for(var key in keys) {
                	clearStore(key);
                }
                self.$f7router.navigate('/Login');
                window.location.reload();
        	}, 3000);
        }
    },
    mounted() {
    	const user = getUser();
    	this.username = user.username;
    	this.realname = user.realname;
    	this.phone = user.phone;
    	this.email = user.email;
    }
}
</script>

<style>
.logoutButton .list-button {
	text-align: center;
}
</style>